<template>
  <div class="editAddress">
    <!-- 版头 -->
    <van-nav-bar
      title="我的地址"
      left-arrow
      @click-left="$router.back()"
      style="background: #e11c34"
    />
    <!-- 具体信息 -->
    <van-form>
      <!-- 用户名栏 -->
      <van-field
        v-model="formData.name"
        name="用户名"
        placeholder="请输入姓名"
        :rules="[{ required: true, message: '请输入姓名' }]"
      />
      <!-- 手机号栏 -->
      <van-field
        v-model="formData.mobile"
        name="mobile"
        placeholder="请输入手机号"
        :rules="[
          { required: true, message: '请输入手机号' },
          { pattern: /^1[3|5|7|8|9]\d{9}$/, message: '手机号格式不正确' },
        ]"
      />
      <!-- 所在地区栏 -->
      <van-field
        v-model="fieldValue"
        is-link
        readonly
        placeholder="请选择所在地区"
        @click="show = true"
      />
      <van-popup v-model="show" round position="bottom">
        <van-cascader
          v-model="cascaderValue"
          title="请选择所在地区"
          :options="options"
          :field-names="fieldNames"
          @close="show = false"
          @finish="onFinish"
          @change="onChange"
        />
      </van-popup>

      <!-- 详细地址 -->
      <van-field
        v-model="formData.address"
        name="address"
        placeholder="请输入详细地址"
        :rules="[{ required: true, message: '请输入详细地址' }]"
      />
    </van-form>
    <!-- /详细地址 -->

    <!-- 设置默认地址 -->
    <van-cell>
      <!-- 使用 title 插槽来自定义标题 -->
      <template #title>
        <van-checkbox v-model="checked" checked-color="#ee0a24">
          设为默认地址
        </van-checkbox>
      </template>
    </van-cell>
    <!-- /设置默认地址 -->

    <!-- 取消、保存 -->
    <div class="saveAndCancel">
      <van-button color="#333333" style="width: 50%">取消</van-button>
      <van-button @click="btnOK" color="#e11c34" style="width: 50%">
        保存
      </van-button>
    </div>
  </div>
</template>

<script>
import {
  getAddressRegion,
  addEditAddressData,
  getAddressDetailData,
} from "@/api/han/address";
export default {
  name: "editAddress",
  data() {
    return {
      formData: {
        // 地址信息
        name: "",
        mobile: "",
        address: "",
        province_id: "", // 省份id
        city_id: "", // 城市id
        district_id: "", // 区县id
        // is_default:1
      },
      addressId: this.$route.params.id,
      show: false,
      fieldValue: "", // 显示地址
      cascaderValue: "",
      // 选项列表，children 代表子选项，支持多级嵌套
      fieldNames: {
        text: "name",
        value: "id",
        children: "items",
      },
      options: [], // 地址
      checked: true,
    };
  },
  computed: {
    is_default() {
      return this.checked;
    },
  },
  methods: {
    // 提交事件
    async btnOK() {
      await addEditAddressData({
        ...this.formData,
        is_default: this.is_default,
      });
      this.$toast.success("添加成功");
      this.formData = {};
      this.$router.back();
    },
    // 地址栏发生变化时触发的事件
    async onChange({ selectedOptions }) {
      let { data } = await getAddressRegion({
        parentId: selectedOptions[selectedOptions.length - 1].id,
      });
      if (selectedOptions[selectedOptions.length - 1].type === 1) {
        console.log(selectedOptions[selectedOptions.length - 1].type);
        data.data.forEach((item) => (item.items = []));
      }
      console.log(123);

      if (selectedOptions[selectedOptions.length - 1].type === 1) {
        this.options.filter((item) => {
          return item.id === selectedOptions[selectedOptions.length - 1].id;
        })[0].items = data.data;
      } else if (selectedOptions[selectedOptions.length - 1].type === 2) {
        console.log(selectedOptions[selectedOptions.length - 1]);
        selectedOptions[selectedOptions.length - 1].items.push(...data.data);
        console.log(data.data);
      }
    },
    // 全部选项选择完毕后，会触发 finish 事件
    onFinish({ selectedOptions }) {
      this.show = false;
      console.log(selectedOptions);
      this.formData.province_id = selectedOptions[0].id;
      this.formData.city_id = selectedOptions[1].id;
      this.formData.district_id = selectedOptions[2].id;
      this.fieldValue = selectedOptions.map((option) => option.name).join("/");
      console.log(this.fieldValue);
    },

    async loadAddressData(id) {
      let { data } = await getAddressRegion({
        parentId: id,
      });
      data.data.forEach((item) => (item.items = []));
      this.options = data.data;
    },
    // 获取全国省地址
    async getAddressData(id) {
      let { data } = await getAddressRegion({
        parentId: id,
      });

      // this.options = data.data
      if (!this.formData.province_id) {
        this.options = data.data;
      } else {
        if (!this.formData.city_id) {
          console.log(data.data);
          this.options.filter((item) => {
            return item.id === id;
          })[0].items = data.data;
        } else {
        }
      }
    },
    // 回显
    async getDetailAddressData() {
      let { data } = await getAddressDetailData({ id: this.addressId });
      this.formData = data.data;
      this.fieldValue = data.data.full_region;
      console.log(data.data);
    },
  },
  created() {
    this.loadAddressData(1);
    if (this.addressId) {
      this.getDetailAddressData();
    }
  },
};
</script>

<style lang="less" scoped>
.editAddress {
  background: #f5f7f9;
  height: 100%;
}
/deep/ .van-nav-bar__title {
  color: #fff;
}
/deep/ .van-nav-bar .van-icon {
  color: #fff;
}
/deep/ .van-checkbox {
  justify-content: center;
}
.saveAndCancel {
  position: absolute;
  width: 100%;
  bottom: 20px;
  // display: flex;
}
</style>
